<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>定义回复内容</title>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">链接</li>
        <li  style="display: none;">自定义内容</li> //去掉display就可以了
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="box-body">
                <form role="form" id="form">
                    <div class="form-group col-md-12" >
                        <label>链接</label>
                        <input type="text" id="link" class="form-control" value="" placeholder="链接...">
                    </div>
                <div class="form-group col-md-12" >
                    <div id="btn_add" class="btn bg-orange btn-flat">保存</div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="box-body">
                <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="example1_filter" class="dataTables_length">
                                <label>搜索回复内容：
                                    <input type="search" id="keyword" class="form-control input-sm" placeholder="回复内容" aria-controls="example1">
                                </label>
                                <button type="button" id="search" class="btn btn-flat margin" style="background: #18bc9c;color: #ffffff;">搜索</button>
                                <button type="button" id="btn_save" class="btn  bg-orange margin" >保存</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                                <thead>
                                <tr role="row">
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 40px;"></th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 100px;">类型</th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 397px;">内容</th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="width: 297px;">创建时间</th>
                                </tr>
                                </thead>
                                <tbody id="tb">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
    var _keyword='';
    $(function(){
        getlist(_keyword);
        $('#search').click(function(){
            table.destroy();
            var keyword = $('#keyword').val();
            getlist(keyword);
        })
        $('#btn_add').click(function(){
            var _link = $('#link').val();
            if(_link != ''){
                layerAlert('保存成功',function(){
                    parent.setval(_link);
                    layerParentClose();
                });
            }else{
                layerAlert('链接不能为空');
                return false;
            }
        })
        $('#btn_save').click(function(){
            var _id = $("input[name='radio']:checked").val();
            layerAlert('保存成功',function(){
                parent.setval(_id);
                layerParentClose();
            });
        })
    })
    function getlist(_keyword)
    {
        $.ajax({
            type: 'post',
            cache: false,
            url:'{:url("admin/Wechatmenu/getMessageList")}',
            data: {keyword:_keyword},
            success: function(data) {
                if(data.code=="0")
                {
                    $("#tb tr").remove();
                    $.each(data.info,function(index,item){
                        var html='<tr role="row" class="odd" id="tr_'+item.id+'">';
                        html+='<td style="vertical-align: middle;"><input name="radio" value="'+item.id+'" type="radio" style="width: 15px;height: 15px;margin-left: 20px"></td>';
                        if(item.info_type == 1)
                            html+='<td style="vertical-align: middle;color: #449d44;">图文</td>';
                        if(item.info_type == 2)
                            html+='<td style="vertical-align: middle;color: #f1a417;">文本</td>';
                        html+='<td style="vertical-align: middle;">'+item.title+'</td>';;
                        html+='<td style="vertical-align: middle;">'+item.createtime+'</td>';
                        html+='</tr>';
                        $("#tb").append(html);
                    });
                    table = $('#example1').DataTable({
                        "paging": true,
                        "lengthChange": false,
                        "lengthMenu": [[10],[10]],
                        "searching": false,
                        "ordering": false,
                        "info": true,
                        "language": {
                            "info": "展示第 <span style='color: red;'>_START_</span> 到 <span style='color: red;'>_END_</span> 条 共 <span style='color: red;'>_TOTAL_</span>条回复信息",
                            "paginate": {
                                "previous": "上一页",
                                "next": "下一页"
                            }
                        },
                        "autoWidth": true,
                    });
                }
            },
            error: function() {
                alert("发生系统错误,请与管理员联系！");
            }
        });
    }
</script>
</html>